<template>
  <div class="category-main-item">
    <img v-lazy="subCategoryItem.image" alt="图片" @load="imgLoad" />
    <p>{{ subCategoryItem.title }}</p>
  </div>
</template>

<script>
export default {
  name: "CategoryMainItem",
  props: {
    subCategoryItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    imgLoad() {
      // 监听图片加载完成事件
      this.$bus.$emit("itemImgLoad");
    }
  }
};
</script>

<style scoped>
.category-main-item {
  width: 50%;
  flex: 1;
  text-align: center;
}

.category-main-item img {
  width: 100px;
}
</style>
